//
// Navs
// --------------------------------------------------


// BASE CLASS
// ----------

.nav {
	margin-left: 0;
	margin-bottom: @baseLineHeight;
	list-style: none;
}

	// Make links block level
	.nav > li > a {
		display: block;
	}

		.nav > li > a:hover {
			text-decoration: none;
		}

	// Redeclare pull classes because of specifity
	.nav > .pull-right {
		float: right;
	}

// Nav headers (for dropdowns and lists)
.nav-header {
	display: block;
	font-size: @baseFontSize * 1.5;
	margin-bottom: 5px;
	font-weight: 100;
	.text-overflow()
}
// Space them out when they follow another list item (link)
.nav li + .nav-header {
	margin-top: 9px;
}


// NAV LIST
// --------

.nav-list {
	padding: 0 10px 5px 20px;
	margin-bottom: 0;
	background-color: @navListBackground;
}

	.nav-list > li > a,
	.nav-list .nav-header {
		color: @gray;
		padding: 0 10px 0 20px;
		margin-left: -20px;
		margin-right: -10px;
		line-height: @baseLineHeight * 1.5;
	}

	.nav-list > li > a {

		&:hover {
			background-color: @navListHoverBackground;
		}
	}

	.nav-list > .active > a,
	.nav-list > .active > a:hover {
		background-color: @navListActiveBackground;
	}

	.nav-list [class^="icon-"] {
		margin-right: 2px;
	}
	// Dividers (basically an hr) within the dropdown
	.nav-list .divider {
		.nav-divider(transparent, transparent);
	}



// TABS AND PILLS
// -------------

// Common styles
.nav-tabs,
.nav-pills {
	border-bottom: 1px solid #ddd;
	.clearfix();
}

	.nav-tabs > li,
	.nav-pills > li {
		float: left;
	}


// TABS
// ----

// Give the tabs something to sit on
.nav-tabs {
	
}
	// Make the list-items overlay the bottom border
	.nav-tabs > li {
		margin-bottom: -1px;
	}
		// Actual tabs (as links)
		.nav-tabs > li > a {
			padding: 8px 12px;
			line-height: @baseLineHeight;
			border: 1px solid transparent;
			margin-right: 2px;

			&:hover {
				border-color: @grayLighter @grayLighter #ddd;
				background-color: @grayLighter;
			}
		}
	// Active state, and it's :hover to override normal :hover
	.nav-tabs > .active > a,
	.nav-tabs > .active > a:hover {
		color: @gray;
		background-color: @white;
		border: 1px solid #ddd;
		border-bottom-color: transparent;
		cursor: default;
	}


// PILLS
// -----

// Links rendered as pills
.nav-pills {

}

.nav-pills > li > a {
	color: @grayDark;
	font-size: @baseFontSize * 1.28;
	line-height: @baseLineHeight * 1.25;
	margin: @baseLineHeight/2 @baseLineHeight @baseLineHeight/2 0;
}

	.nav-pills > li.pull-right > a {
		margin-right: 0;
		margin-left: @baseLineHeight;
	} 

// Active state
.nav-pills > li > a:hover,
.nav-pills > .active > a,
.nav-pills > .active > a:hover {
	color: @linkColor;
}



// STACKED NAV
// -----------

// Stacked tabs and pills
.nav-stacked > li {
	float: none;
}

	.nav-stacked > li > a {
		margin-right: 0; // no need for the gap between nav items
	}

// Tabs
.nav-tabs.nav-stacked {
	border-bottom: 0;
}

	.nav-tabs.nav-stacked > li > a {
		border: 1px solid #ddd;
	}

		.nav-tabs.nav-stacked > li > a:hover {
			border-color: #ddd;
			z-index: 2;
		}

// Pills
.nav-pills.nav-stacked {
	border-bottom: none;
}

.nav-pills.nav-stacked > li > a {
	margin-bottom: 3px;
}

.nav-pills.nav-stacked > li:last-child > a {
	margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
}



// DROPDOWNS
// ---------

// Default dropdown links
// -------------------------
// Make carets use linkColor to start
.nav .dropdown-toggle .caret {
	border-top-color: @linkColor;
	border-bottom-color: @linkColor;
	margin-top: 6px;
}

.nav .dropdown-toggle:hover .caret {
	border-top-color: @linkColorHover;
	border-bottom-color: @linkColorHover;
}
/* move down carets for tabs */
.nav-tabs .dropdown-toggle .caret {
	margin-top: 8px;
}

// Active dropdown links
// -------------------------
.nav .active .dropdown-toggle .caret {
	border-top-color: #fff;
	border-bottom-color: #fff;
}

.nav-tabs .active .dropdown-toggle .caret {
	border-top-color: @gray;
	border-bottom-color: @gray;
}

// Active:hover dropdown links
// -------------------------
.nav > .dropdown.active > a:hover {
	cursor: pointer;
}

// Open dropdowns
// -------------------------
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover {
	color: @white;
	background-color: @grayLight;
	border-color: @grayLight;
}

.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
.nav li.dropdown.open a:hover .caret {
	border-top-color: @white;
	border-bottom-color: @white;
	.opacity(100);
}

// Dropdowns in stacked tabs
.tabs-stacked .open > a:hover {
	border-color: @grayLight;
}



// TABBABLE
// --------


// COMMON STYLES
// -------------

// Clear any floats
.tabbable {
	.clearfix();
}

.tab-content {
	overflow: auto; // prevent content from running below tabs
}

// Remove border on bottom, left, right
.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
	border-bottom: 0;
}

// Show/hide tabbable areas
.tab-content > .tab-pane,
.pill-content > .pill-pane {
	display: none;
}

.tab-content > .active,
.pill-content > .active {
	display: block;
}


// BOTTOM
// ------

.tabs-below > .nav-tabs {
	border-top: 1px solid #ddd;
}

	.tabs-below > .nav-tabs > li {
		margin-top: -1px;
		margin-bottom: 0;
	}

		.tabs-below > .nav-tabs > li > a {
			&:hover {
				border-bottom-color: transparent;
				border-top-color: #ddd;
			}
		}

	.tabs-below > .nav-tabs > .active > a,
	.tabs-below > .nav-tabs > .active > a:hover {
		border-color: transparent #ddd #ddd #ddd;
	}

// LEFT & RIGHT
// ------------

// Common styles
.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
	float: none;
}

	.tabs-left > .nav-tabs > li > a,
	.tabs-right > .nav-tabs > li > a {
		min-width: 74px;
		margin-right: 0;
		margin-bottom: 3px;
	}

// Tabs on the left
.tabs-left > .nav-tabs {
	float: left;
	margin-right: 19px;
	border-right: 1px solid #ddd;
}

	.tabs-left > .nav-tabs > li > a {
		margin-right: -1px;
	}

		.tabs-left > .nav-tabs > li > a:hover {
			border-color: @grayLighter #ddd @grayLighter @grayLighter;
		}

	.tabs-left > .nav-tabs .active > a,
	.tabs-left > .nav-tabs .active > a:hover {
		border-color: #ddd transparent #ddd #ddd;
		*border-right-color: @white;
	}

// Tabs on the right
.tabs-right > .nav-tabs {
	float: right;
	margin-left: 19px;
	border-left: 1px solid #ddd;
}

	.tabs-right > .nav-tabs > li > a {
		margin-left: -1px;
	}

		.tabs-right > .nav-tabs > li > a:hover {
			border-color: @grayLighter @grayLighter @grayLighter #ddd;
		}

	.tabs-right > .nav-tabs .active > a,
	.tabs-right > .nav-tabs .active > a:hover {
		border-color: #ddd #ddd #ddd transparent;
		*border-left-color: @white;
	}



// DISABLED STATES
// ---------------

// Gray out text
.nav > .disabled > a,
.nav > .disabled > a:hover {
	color: @grayLight;
}
	// Nuke hover effects
	.nav > .disabled > a:hover {
		text-decoration: none;
		background-color: transparent;
		cursor: default;
	}
